<div class="layui-layout layui-layout-admin">
    {{render "public/header.html"}}
    {{$addr := .addr}}
    {{render "public/menu.html"}}
    <div class="layui-body layui-content">
        <!-- 内容主体区域 -->
        <div class="layui-breadcrumb">
            <a href="/">主页</a>
            <a>
                <cite>常驻任务列表</cite>
            </a>
        </div>
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <select lay-filter="select-menu">
                        {{range $k,$v := .addrs}}
                            {{if eq $v.State 1}}
                                <option value="{{$v.Addr}}" {{if eq $v.Addr $addr}}selected{{end}}>{{$v.Addr}}</option>
                            {{end}}
                        {{end}}
                    </select>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn jia-btn-normal" id="start-script">启动</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-danger" id="stop-script">停止</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block layui-layout-right">
                    <a href="/daemon/task/edit?addr={{.addr}}" class="layui-btn jia-btn-normal">添加</a>
                </div>
            </div>
        </div>

        <div class="layui-card layui-only-select" style="min-height: 284px;">
            <div class="layui-card-header">运行列表</div>
            <div class="layui-card-body">
                <table class="layui-hide" id="taskTableId" lay-filter="taskTable"></table>
                <div class="layui-hide txt-center" id="no-data">暂无数据</div>
            </div>
        </div>
    </div>
    {{render "public/footer.html"}}
</div>

<script src="/static/lib/layui/layui.js"></script>
<script>
    //config的设置是全局的
    layui.config({
        base: '/static/js/' //假设这是你存放拓展模块的根目录
    })
    layui.use(['common', 'element', 'form', 'table', 'jquery'], function () {
        var common = layui.common;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;

        var tableCols = [[ //表头
            {type:'checkbox', fixed: 'left'},
            {field: 'ID', width:60, sort: true, fixed: 'left', title: 'ID'},
            {field:'Name', width:170, fixed: 'left', title: '名称'},
            {field:'Command', width:170, title: '脚本', templet: function(d) {
                var oldStr = d.Command + ' ' + d.Args;
                newStr = oldStr.replace(/(.{0,20}).*/g,"$1")
                if (oldStr.length > newStr.length) {
                    newStr += "..."
                }
                return newStr
            }},
            {field:'Status', width:90, title: '状态', templet: function(d){
                var staticHtml = '';
                if (d.Status === 0) {
                    staticHtml = '<a href="#" class="layui-btn layui-btn-xs layui-btn-danger">已停止</a>';
                } else {
                    staticHtml = '<a href="#" class="layui-btn layui-btn-xs jia-btn-normal">运行中</a>'
                }
                return staticHtml;
            }},
            {field:'ProcessNum', width:140, title: '进程', sort: true, templet: function(d) {
                return d.ProcessNum;
            }},
            {field:'CreatedAt', width:170, title: '创建日期', sort: true, templet: function(d) {
                return common.UTCToTime(d.CreatedAt);
            }},
            {field:'StartAt', minWidth:170, title: '执行日期', sort: true, templet: function(d) {
                return common.UTCToTime(d.StartAt);
            }},
            {field:'handle', width:140, fixed: 'right', title: '编辑', templet: function(d){
                var isStartTask = '';
                if (d.Status == 0) {
                    isStartTask = '<a href="/daemon/task/action?taskId='+ d.ID +'&addr='+ common.getRequest().addr +'&action=start" class="layui-btn layui-btn-xs jia-btn-normal reset-btn">启动</a>';
                } else {
                    isStartTask = '<a href="/daemon/task/action?taskId='+ d.ID +'&addr='+ common.getRequest().addr +'&action=stop" class="layui-btn layui-btn-xs layui-btn-danger reset-btn">停止</a>';
                }
                var  editorHtml = isStartTask + '<div class="layui-input-inline select-bottom" style="width: 70px;" lay-event="operate">' +
                                    '<select lay-filter="selectTable" id="'+ d.ID +'">' +
                                        '<option value="">操作</option>' +
                                        '<option value="修改常驻任务">修改常驻任务</option>' +
                                        '<option value="删除常驻任务">删除常驻任务</option>' +
                                        '<option value="查看任务日志">查看任务日志</option>' +
                                    '</select>' +
                                '</div>';
                return editorHtml;
            }}
        ]]

        $.ajax({
            type: 'POST',
            url: '/daemon/task/list',
            data: {
                addr: common.getRequest().addr
            },
            success: function(res) {
                var taskDatas = res.data;
                if (taskDatas) {
                    table.render({
                        elem: '#taskTableId',
                        data: taskDatas,
                        cols: tableCols
                    });
                } else {
                    $('#no-data').addClass('layui-show').removeClass('layui-hide');
                }
            },
            error: function(error) {
                console.log(error)
            }
        })

        // 监听top下拉框执行表格重载
        form.on('select(select-menu)', function (data) {
            window.location.href = '/daemon/task/list?addr=' + data.value;
        });

        /*监听表单里面的select框*/
        form.on('select(selectTable)', function (data) {
            var selectValue = data.value;
            var selectId = $(data.elem).context.getAttribute('id');
            if (selectValue == '修改常驻任务') {
                window.location.href = '/daemon/task/edit?taskId='+ selectId +'&addr=' + common.getRequest().addr;
            }
            if (selectValue == '删除常驻任务') {
                window.location.href = '/daemon/task/action?taskId='+ selectId +'&addr=' + common.getRequest().addr + '&action=delete';
            }
            if (selectValue == '强杀常驻任务') {
                window.location.href = '/daemon/task/action?taskId='+ selectId +'&addr=' + common.getRequest().addr + '&action=kill';
            }
            if (selectValue == '查看任务日志') {
                window.location.href = '/daemon/task/log?taskId='+ selectId +'&addr=' + common.getRequest().addr;
            }
            
        });

        $('#start-script').on('click', function () {
            var checkStatus = table.checkStatus('taskTableId');
            var checkData = checkStatus.data; //得到选中的数据
            var checkIdList = [];
            if(checkData.length === 0){
                return layer.msg('请选择需要启动的脚本');
            }
            for (var i=0; i < checkData.length; i++) {
                checkIdList.push(checkData[i].ID)
            }
            location.href = "/daemon/task/action?action=start&taskId="+checkIdList.join(",") + '&addr=' + common.getRequest().addr;
            
        })
        $('#stop-script').on('click', function () {
            var checkStatus = table.checkStatus('taskTableId');
            var checkData = checkStatus.data; //得到选中的数据
            var checkIdList = [];
            if(checkData.length === 0){
                return layer.msg('请选择需要启动的脚本');
            }
            for (var i=0; i < checkData.length; i++) {
                checkIdList.push(checkData[i].ID)
            }
            location.href = "/daemon/task/action?action=stop&taskId="+checkIdList.join(",") + '&addr=' + common.getRequest().addr + '&action=stop';
        })


        $('#flexible-icon').on('click', function () {
            if ($(this).hasClass('layui-icon-spread-left')) {
                $(this).addClass('layui-icon-shrink-right').removeClass('layui-icon-spread-left');
                $('.layui-layout-body').removeClass('min-layout');
            } else {
                $(this).addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
                $('.layui-layout-body').addClass('min-layout');
            }
        })

        if (window.innerWidth < 990) {
            $('.layui-layout-body').addClass('min-layout');
            $('#flexible-icon').addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
        }
        $(window).on('resize', function () {
            if (window.innerWidth < 990) {
                $('.layui-layout-body').addClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-spread-left').removeClass(
                    'layui-icon-shrink-right');
            } else {
                $('.layui-layout-body').removeClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-shrink-right').removeClass(
                    'layui-icon-spread-left');
            }
        })

    });
</script>

